<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/lib/layui/css/layui.css" media="all" />

</head>
<body style="background-color: white; overflow-y: scroll;">
	<div style="width: 100%; height: 100%;">
	
		<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" action="" id="f1" layFilter="receiveForm">
				
				<div class="layui-inline">
					<label class="layui-form-label"> <span style="color: red;">
							运单编号 </span>
					</label>
					<div class="layui-inline">
						<input type="text" id="waybill_number" style="width: 280px;"
							name="waybill_number" placeholder="" autocomplete="off"
							lay-verify="required" class="layui-input width-d">
					</div>
				</div>
				<input type="hidden" name ="code" value="1" >
				<div class="layui-inline"
					style="margin-left: 91px; margin-top: 15px;">
					<a class="layui-btn layui-btn-normal"  lay-submit=""
						lay-filter="search" lay-event="search">
						<i class="layui-icon"></i> 搜索
					</a>
						<a class="layui-btn layui-btn-xs " onclick="edit()" >编辑</a>
					
				</div>
			</form>
			
	</blockquote>
	<table id="scanStatusList" lay-filter="scanStatusList"></table>

	<!--操作-->
	<script type="text/html" >
		<a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
	</script>
	
	</div>
</body>
<script type="text/javascript" src="/lib/layui/layui.js"></script>
<script>
	//Demo
	layui.use([ 'form','table','layer', 'jquery' ], function() {
		 table = layui.table;
		  layer = parent.layer === undefined ? layui.layer : top.layer;
		  $ = layui.jquery;
		  form = layui.form;

		tableIns = table.render({
			elem : '#scanStatusList'
			 ,height: 300
			 ,id:  ''
			 ,url: '' //数据接口
			,cols : [ [ //标题栏
			{
				type : 'checkbox'
			}, {
				title : '序号',
				type : 'numbers'
			}, {
				field : 'waybill_number',
				title : '运单编号',
				width : 150
			}, {
				field : 'destination_id',
				title : '目的地',
				width : 150
			}, {
				field : 'scanner_id',
				title : '扫描员',
				width : 150
			}, {
				field : 'create_time',
				title : '操作日期',
				width : 150
			}, {
				field : 'taker_id',
				title : '取件员',
				width : 150
			}, {
				field : 'send_network_id',
				title : '寄件网点',
				width : 150
			}, {
				field : 'weight',
				title : '重量',
				width : 150
			}, {
				field : 'item_type_id',
				title : '物品类型',
				width : 150
			}, {
				field : 'express_type_id',
				title : '快件类型',
				width : 150
			} 
			,{
				title : "操作",
				fixed : 'right',
				width : 200,
				align : 'center',
				toolbar : '#scanStatusList'
			}
			
			] ],
			skin : 'row' //表格风格
			,
			page : true //是否显示分页
			,
			limits : [ 15, 30, 50, 100, 1000 ],
			limit : 15
		//每页默认显示的数量
		});
		
		
		//监听提交
		form.on('submit(search)', function(data) {
			var params = JSON.stringify(data.field);
			alert(params);
		  	 tableIns.reload({
		 		  
		 		    where : data.field
		 		  
		 		});   
			return false;
		});
		

	
	 //监听行工具栏事件
	  table.on('tool(scanStatusList)', function(obj){
	        var layEvent = obj.event,
	            data = obj.data;

	        if(layEvent === 'edit'){ //编辑
	        	edit(data);
	        } 
	    });
		
	
	});//结束括号
		
	 //编辑填扫描单的信息
    function edit(edit){

    	var index1 = parent.layer.open({
			title : '选择目的地',
			type : 2,
			area : [ '750px', '460px' ], //宽高
			content : 'page?op=editWaybillStatus',
			success : function(layero, index){
		           // var body = parent.layer.getChildFrame('body', index);//获取弹出层的body
		            var body = layer.getChildFrame('body', index);//获取弹出层的body
		            
		            console.log(body.html())
		            console.log("index:"+index);
		            if(edit){
		            	body.find("[name ='waybill_number']").attr("readonly",true);
		            	body.find("#edit").val(JSON.stringify(edit));
		            }
		            setTimeout(function(){
		                layui.layer.tips('点击此处返回收件扫描列表', '.layui-layer-setwin .layui-layer-close', {
		                    tips: 3
		                });
		            },500)
		        }
		});
	
    }

</script>

</html>